<template>

    <div v-loading="loading">

        <div class="addBanner">
            <el-button type="primary" @click="addBannerVisible = true">
                添加
            </el-button>
        </div>

        <div class="bannerTable">

            <el-table
                    :data="list"
                    border
                    style="width: 1450px">
                <el-table-column
                        align="center"
                        prop="images"
                        label="图片"
                        width="250">
                    <template slot-scope="scope">
                        <el-image
                                style="width: 150px; height: 60px"
                                :src="scope.row.images"
                                fit="contain"
                        >
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="url"
                        label="跳转链接"
                        width="319">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="position"
                        label="轮播图位置"
                        width="180">
                </el-table-column>
                <el-table-column
                        width="200"
                        align="center"
                        prop="uptime"
                        label="上线时间">
                </el-table-column>
                <el-table-column
                        width="200"
                        align="center"
                        prop="downtime"
                        label="下线时间">
                </el-table-column>
                <el-table-column
                        width="100"
                        align="center"
                        prop="sort"
                        label="排序">
                </el-table-column>
                <el-table-column
                        width="200"
                        align="center">
                    <template slot-scope="scope">
                        <el-button
                                @click="handleUpdateBannerVisible(scope.row)"
                                icon="el-icon-edit"
                                size="mini"
                                type="primary"
                        >修改
                        </el-button>
                        <el-button
                                @click="handleDeleteBanner(scope.row.id)"
                                icon="el-icon-delete"
                                size="mini"
                                type="danger"
                        >删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!--添加轮播图-->
        <el-dialog title="添加轮播图" :visible.sync="addBannerVisible">
            <el-form ref="addBannerForm" :model="addBannerData" :rules="rules">
                <el-form-item prop="url" label="跳转链接" :label-width="formLabelWidth">
                    <el-input
                            placeholder="请输入跳转链接"
                            style="width: 300px"
                            v-model="addBannerData.url"
                            autocomplete="off">
                    </el-input>
                </el-form-item>
                <el-form-item prop="position" label="轮播图位置" :label-width="formLabelWidth">
                    <el-select
                            style="width: 300px"
                            v-model="addBannerData.position"
                            placeholder="请选择轮播图位置">
                        <el-option label="首页" value="首页"></el-option>
                        <el-option label="商城首页" value="商城首页"></el-option>
                        <el-option label="餐饮" value="餐饮"></el-option>
                        <el-option label="商城" value="商城"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="uptime" label="上线时间" :label-width="formLabelWidth">
                    <el-date-picker
                            value-format="yyyy-MM-dd HH:mm:ss"
                            style="width: 300px"
                            v-model="addBannerData.uptime"
                            type="datetime"
                            placeholder="选择上线时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item prop="downtime" label="下线时间" :label-width="formLabelWidth">
                    <el-date-picker
                            value-format="yyyy-MM-dd HH:mm:ss"
                            style="width: 300px"
                            v-model="addBannerData.downtime"
                            type="datetime"
                            placeholder="选择下线时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item prop="sort" label="排序" :label-width="formLabelWidth">
                    <el-input-number v-model="addBannerData.sort" label="请输入排序" style="width: 300px">
                    </el-input-number>
                </el-form-item>
                <el-form-item prop="images" label="图片" :label-width="formLabelWidth">
                    <div class="picUpload" style="display:flex;flex-direction:row">
                        <div>
                            <el-upload
                                    :http-request="handlePictureCardPreview"
                                    :multiple="false"
                                    action=""
                                    list-type="picture-card"
                                    name="banner"
                            >
                                <i class="el-icon-plus"></i>
                            </el-upload>
                            <el-dialog
                                    :modal="false"
                                    :center="true"
                                    :show-close="false"
                                    class="commonVisible"
                                    :visible.sync="addImageVisible"
                                    :fullscreen="true">
                                <img alt="" class="" :src="addBannerData.images" v-show="addImageVisible">
                                <span class="hoverBox" @click="addImageVisible=false" v-show="addImageVisible">
							<span class="deleteIcon">
								<i class="el-icon-delete"></i>
							</span>
						</span>

                            </el-dialog>
                        </div>
                    </div>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addBannerVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleAddBanner('addBannerForm')">确 定</el-button>
            </div>
        </el-dialog>


        <!--修改轮播图-->
        <el-dialog title="添加轮播图" :visible.sync="updateBannerVisible">
            <el-form ref="updateBannerForm" :model="updateBannerData" :rules="rules">
                <el-form-item prop="url" label="跳转链接" :label-width="formLabelWidth">
                    <el-input
                            placeholder="请输入跳转链接"
                            style="width: 300px"
                            v-model="updateBannerData.url"
                            autocomplete="off">
                    </el-input>
                </el-form-item>
                <el-form-item prop="position" label="轮播图位置" :label-width="formLabelWidth">
                    <el-select
                            style="width: 300px"
                            v-model="updateBannerData.position"
                            placeholder="请选择轮播图位置">
                        <el-option label="首页" value="首页"></el-option>
                        <el-option label="商城首页" value="商城首页"></el-option>
                        <el-option label="餐饮" value="餐饮"></el-option>
                        <el-option label="商城" value="商城"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="uptime" label="上线时间" :label-width="formLabelWidth">
                    <el-date-picker
                            value-format="yyyy-MM-dd HH:mm:ss"
                            style="width: 300px"
                            v-model="updateBannerData.uptime"
                            type="datetime"
                            placeholder="选择上线时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item prop="downtime" label="下线时间" :label-width="formLabelWidth">
                    <el-date-picker
                            value-format="yyyy-MM-dd HH:mm:ss"
                            style="width: 300px"
                            v-model="updateBannerData.downtime"
                            type="datetime"
                            placeholder="选择下线时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item prop="sort" label="排序" :label-width="formLabelWidth">
                    <el-input-number v-model="updateBannerData.sort" label="请输入排序" style="width: 300px">
                    </el-input-number>
                </el-form-item>
                <el-form-item prop="images" label="图片" :label-width="formLabelWidth">
                    <div class="picUpload" style="display:flex;flex-direction:row">
                        <div>
                            <el-upload
                                    :http-request="handlePictureCardPreview"
                                    :multiple="false"
                                    action=""
                                    list-type="picture-card"
                                    name="banner"
                            >
                                <i class="el-icon-plus"></i>
                            </el-upload>
                            <el-dialog
                                    :modal="false"
                                    :center="true"
                                    :show-close="false"
                                    class="commonVisible"
                                    :visible.sync="updateImageVisible"
                                    :fullscreen="true">
                                <img alt="" class="" :src="updateBannerData.images" v-show="updateImageVisible">
                                <span class="hoverBox" @click="updateImageVisible=false" v-show="updateImageVisible">
							<span class="deleteIcon">
								<i class="el-icon-delete"></i>
							</span>
						</span>

                            </el-dialog>
                        </div>
                    </div>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="updateBannerVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleUpdateBanner('updateBannerForm')">确 定</el-button>
            </div>
        </el-dialog>

        <div class="bannerPage">
            <el-pagination
                    @current-change="defaultData"
                    :page-size="5"
                    layout="prev, pager, next"
                    :total="total">
            </el-pagination>
        </div>
    </div>

</template>

<script>
    export default {
        name: 'settingBanner',
        data() {
            return {
                loading: false,
                list: [],
                total: 0,
                pageVisible: true,
                addBannerVisible: false,
                formLabelWidth: '300px',
                addBannerData: {},
                addImageVisible: false,
                rules: {
                    url: [{required: true, message: '请输入跳转链接', trigger: ''}],
                    position: [{required: true, message: '请输入轮播图位置'}],
                    images: [{required: true, message: '请上传图片'}],
                    sort: [{required: true, message: '请输入排序'}],
                    downtime: [{required: true, message: '请输入下线时间'}],
                    uptime: [{required: true, message: '请输入上线时间'}]
                },
                updateBannerVisible: false,
                updateBannerData: {},
                updateImageVisible: false
            }
        },
        methods: {

            defaultData(page) {
                this.loading = true;
                this.$http.get('/web/banner/list', {
                    params: {
                        token: localStorage.getItem('user_token'),
                        pageSize: 5,
                        page: page
                    }
                }).then(response => {
                    if (response.data.status === 'success') {
                        this.list = response.data.data.list
                        this.total = response.data.data.pagination.total

                        if (this.total < 5) {
                            this.pageVisible = false;
                        }
                    }
                    this.loading = false;
                }).catch((error) => {
                    console.log(error)
                    this.loading = false;
                })
            },

            handlePictureCardPreview(file) {
                let imageFile = file.file;
                let formData = new FormData();
                formData.append("image", imageFile);
                formData.append("action", file.filename);
                this.loading = true;
                this.$http.post('/api/tool/ali/upload/image', formData).then((response) => {
                    this.addBannerData.images = response.data.data;
                    this.loading = false;
                }).catch((error) => {
                    this.loading = false;
                })
            },

            handleAddBanner(name) {
                this.$refs[name].validate((valid) => {
                    if (!valid) {
                        return false;
                    }
                })

                console.log(this.addBannerData)

                this.addBannerData.token = localStorage.getItem('user_token');
                this.loading = true;
                this.$http.post('/web/banner/add', this.addBannerData).then(response => {
                    if (response.data.status === 'success') {
                        this.$message.success('添加成功');
                        this.defaultData();
                        this.addBannerData = {};
                        this.addBannerVisible = false;
                    }
                    this.loading = false;
                }).catch((error) => {
                    console.log(error)
                    this.loading = false;
                })
            },

            handleUpdateBannerVisible(value) {
                this.updateBannerData = value;
                this.updateBannerVisible = true;

                if (value.images) {
                    this.updateImageVisible = true;
                } else {
                    this.updateImageVisible = false;
                }

            },

            handleUpdateBanner(name) {
                this.$refs[name].validate((valid) => {
                    if (!valid) {
                        return false;
                    }
                })

                this.updateBannerData.token = localStorage.getItem('user_token');
                this.loading = true;
                this.$http.post('/web/banner/update', this.updateBannerData).then(response => {
                    if (response.data.status === 'success') {
                        this.$message.success('修改成功');
                        this.defaultData();
                        this.updateBannerData = {};
                        this.updateBannerVisible = false;
                    }
                    this.loading = false;
                }).catch((error) => {
                    console.log(error)
                    this.loading = false;
                })
            },

            handleDeleteBanner(id) {
                this.$confirm('是否删除该轮播图?', '删除轮播图', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    this.loading = true;
                    this.$http.get('/web/banner/del', {
                        params:{
                            token: localStorage.getItem('user_token'),
                            id: id
                        }
                    }).then(response => {
                        if (response.data.status === 'success') {
                            this.$message.success('删除成功');
                            this.defaultData();
                        }
                        this.loading = false;
                    }).catch(() => {
                        this.loading = false;
                    })
                });
            }
        },
        mounted() {
            this.defaultData();
        }
    }
</script>

<style>
    .addBanner {
        margin-top: 50px;
        margin-left: 100px;
    }

    .bannerTable {
        margin-left: 100px;
        margin-top: 24px;
    }

    .bannerPage {
        margin-top: 24px;
        margin-left: 750px;
    }
</style>

<style scoped lang="scss">
    @import './banner.scss';

</style>
